<template>
  <div class="pyBox">
    <div class="topBox">
      <p>查询结果</p>
      <a-icon
        type="close"
        @click="onClose"
        :style="{ fontSize: '16px', color: '#000', float: 'right', margin: '10px' }"
      />
    </div>
    <div class="pyconBox">
      <a-row style="margin-bottom:10px;">
        <a-col :span="10">
          <span>任务名称：</span><span>{{ infoObj.taskName }}</span>
        </a-col>
        <a-col :span="14">
          <span>创建时间：</span><span>{{ infoObj.createTime }}</span>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <span>匹配轨迹点：</span><span>{{ infoObj.standardTrackCount }}</span>
        </a-col>
      </a-row>
    </div>

    <div class="add-box" v-if="isOperation">
      <a-button type="primary" @click="onAdd" :disabled="isDisabled">发起任务</a-button>
    </div>
    <div class="py-table">
      <CustomTable
        ref="table"
        :showAlert="false"
        :columns="columns"
        :dataSource="pageData"
        :showSelection="true"
        :showPagination="true"
        @selectedRow="onSelectedRow"
        rowKey="key"
        :scroll="{ y: 550 }"
        :loading="listLoading"
        @change="onTableChange"
      >
        <!-- <template slot="order" slot-scope="text, record, index">
          {{ index + 1 }}
        </template> -->
        <template slot="phone" slot-scope="text, record">
          <span>{{ text }}</span>
          <a-tag v-if="record.isSamplePerson" style="margin-top:10px;" color="red">负样本人员</a-tag>
        </template>
        <template slot="count" slot-scope="text, record">
          <span v-if="record.trackList.length > 0">
            <a href="javascript:;" @click.stop="onTrackCount(record)">{{ text }}</a>
          </span>
          <span v-else>{{ text }}</span>
        </template>
        <template slot="task" slot-scope="text, record" v-if="isOperation">
          <a
            style="display:block;"
            v-for="(item, index) in record.relationTasks"
            :key="index"
            href="javascript:;"
            @click.stop="onTaskDetail(item)"
            ><j-ellipsis :value="item.task_name" :length="5"
          /></a>
        </template>
        <template slot="action" slot-scope="text, record" v-if="isOperation">
          <div class="editable-row-operations">
            <span>
              <a href="javascript:;" @click.stop="onTrans(record)">转移</a>
            </span>
          </div>
        </template>
      </CustomTable>
    </div>
    <!--弹框功能和情报管理明文列表一样，这里就写intelligence -->
    <!--页面来源pageType， 1：案事件管理 2：任务情报列表 3： 配置情报列表 4： 重点人列表 5：任务情报管理 6：种子号码列表 7：协查函列表、8 审批列表   10 负样本人员库 11 时空碰撞 -->
    <AddCaseModal
      ref="addCaseModalId"
      title="新增案事件"
      :targetData="selectRows"
      :pageType="11"
      moduleType="intelligence"
      @close="addCaseClose"
      @createSuccess="addCaseClose"
    />
    <CaseDetailModal ref="caseDetailModalId" pageType="11" moduleType="caseEvent" />
    <delete-modal ref="deleteModalRef" tipTxt="添加负样本库" title="提示" type="keyPersonnel" />
  </div>
</template>

<script>
// import { skpz } from '@/api'
import CustomTable from '@/components/zxd/Table/CustomTable'
import AddCaseModal from '@/views/wxSmuggle/modules/AddCaseModal'
import CaseDetailModal from '@/views/wxSmuggle/modules/CaseDetailModal'
import * as api from '@/api/wxSmuggle/eventModel.js'
import deleteModal from '@/views/wxSmuggle/people/modules/deleteModal'
import { querySimpleByPhoneList } from '@/utils/util'
export default {
  props: ['visible'],
  components: {
    CustomTable,
    AddCaseModal,
    CaseDetailModal,
    deleteModal
  },
  data() {
    return {
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {
        current: 1, //当前页
        records: [],
        pages: 1, //页数
        size: 10, //一页10条
        total: 0 //总条数
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          align: 'center',
          width: 60,
          scopedSlots: { customRender: 'order' },
          customRender: (text, record, index) => `${(this.pageData.pages - 1) * 10 + (index + 1)}` //序号分页后连续
        },
        {
          title: '手机号码',
          dataIndex: 'phone',
          align: 'center',
          width: 140,
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '匹配轨迹点',
          dataIndex: 'count',
          align: 'center',
          // width: 110,
          scopedSlots: { customRender: 'count' }
        },
        {
          title: '关联任务',
          dataIndex: 'task',
          align: 'center',
          width: 120,
          scopedSlots: { customRender: 'task' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 60,
          scopedSlots: { customRender: 'action' }
        }
      ],
      selectRows: [],
      isDisabled: true,
      infoObj: {},
      listLoading: false,
      totalData: [],
      isOperation: true,
      taskId: ''
    }
  },
  methods: {
    setOperation(val) {
      this.isOperation = val
    },
    getData(id, taskId) {
      this.taskId = taskId
      this.getDetail(id)
    },
    getDetail(id) {
      this.listLoading = true
      api
        .getTimeSpaceCollisionTaskResult({ taskId: id })
        .then(res => {
          if (res.success) {
            this.listLoading = false
            this.infoObj.taskName = res.result.taskName
            this.infoObj.standardTrackCount = res.result.standardTrackCount
            this.infoObj.createTime = res.result.createTime
            let trackList = res.result.timeSpaceCollisionTaskResultList
            if (trackList != null && trackList.length > 0) {
              this.pageData = {
                current: 1, //当前页
                records: [],
                pages: 1, //页数
                size: 10, //一页10条
                total: trackList.length //总条数
              }
              trackList.forEach((item, index) => {
                this.totalData.push({
                  key: index,
                  count: item.count,
                  phone: item.phone,
                  home: item.home,
                  relationTasks: item.relationTasks,
                  trackList: item.timeSpaceCollisionTaskPersonTrackList
                })
                this.pageData.records.push({
                  key: index,
                  count: item.count,
                  phone: item.phone,
                  home: item.home,
                  relationTasks: item.relationTasks,
                  trackList: item.timeSpaceCollisionTaskPersonTrackList
                })
              })
              //判断是否是负样本号码，并添加负样本标签(电话号码字段：phoneNumber传1，phone传2，msisdn传3)
              querySimpleByPhoneList(this, 2, this.pageData.records)
            } else {
              this.pageData = {
                current: 1, //当前页
                records: [],
                pages: 1, //页数
                size: 10, //一页10条
                total: 0 //总条数
              }
            }
          } else {
            this.listLoading = false
          }
        })
        .catch(e => {
          this.listLoading = false
          this.$message.warn('请求失败！')
        })
    },
    addCaseClose() {
      this.$refs.table.onClearRowKeys()
    },
    onAdd() {
      console.log(this.selectRows)
      this.$refs.addCaseModalId.show()
    },
    //审计埋点传参
    timeSpaceCollisionAudit() {
      api.timeSpaceCollisionAudit({ type: 'track' }).then(res => {
        if (res.success) {
        }
      })
    },
    onTrackCount(record) {
      console.log('record')
      console.log(record)
      let trackList = []
      let arr = []
      if (record.trackList.length > 0) {
        record.trackList.forEach((item, index) => {
          trackList.push({
            key: index,
            longitude: item.longitude,
            latitude: item.latitude
          })
        })
        arr = [
          {
            list: trackList
          }
        ]
      }

      // let arr = [
      //   {
      //     list: [
      //       { key: 0, longitude: '125.177238', latitude: '43.974533' },
      //       { key: 1, longitude: '125.209433', latitude: '43.819878' }
      //     ]
      //   }
      // ]
      // 绘制轨迹
      this.$emit('on-task-details-drawer', arr)
      this.timeSpaceCollisionAudit()
    },
    onTrans(row) {
      console.log('row')
      console.log(row)
      let arr = [
        {
          taskId: this.taskId,
          phone: row.phone,
          phoneArea: row.home
        }
      ]
      this.$refs.deleteModalRef.edit(arr)
      // this.$refs.transModalId.show(id)
    },
    // 任务详情
    onTaskDetail(item) {
      let record = {
        taskId: item.id
      }
      this.$refs.caseDetailModalId.show(record)
    },

    onSelectedRow(rows) {
      // console.log(rows)
      // this.selectRows=rows.map(item=>{
      //   return{
      //     phoneNumber:item.phone,
      //   }
      // })
      this.selectRows = rows
      this.isDisabled = rows.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      // console.log('paginations')
      // console.log(paginations)
      // this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      // this.refreshTable()
      //假分页
      this.pageData = {
        current: paginations.pageNo, //当前页
        records: this.totalData,
        pages: paginations.pageNo, //页数
        size: 10, //一页10条
        total: this.totalData.length //总条数
      }
      //判断是否是负样本号码，并添加负样本标签(电话号码字段：phoneNumber传1，phone传2，msisdn传3)
      querySimpleByPhoneList(this, 2, this.pageData.records)
    },
    onClose(value) {
      this.$emit('close', value)
    }
    // onClickRow(row, n) {
    //   this.active = n
    //   this.$emit('on-click-row', row)
    // },
  }
}
</script>

<style lang="less">
.ctr-row-table label.ant-checkbox-wrapper.ant-checkbox-wrapper-disabled {
  display: none;
}
.tw-container {
  display: inline-block;
  margin-left: 50px;
  color: #ffffff;
  .twBlock {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    margin-top: 5px;
    float: right;
  }
}
.pyBox {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background-color: #fff;
  // background: rgba(255, 255, 255, 0.9);
  width: 550px;
  .topBox {
    background-color: #f2f2f2 !important;
    overflow: hidden;
    p {
      float: left;
      color: #000;
      padding: 15px 10px 0;
      font-weight: 500;
      font-size: 16px;
      // line-height: 22px;
    }
    /deep/.anticon {
      float: right;
      margin: 10px;
    }
  }
  .pyconBox {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    span {
      color: #000;
    }
  }
  .add-box {
    position: absolute;
    right: 10px;
    top: 100px;
  }
  .search-box {
    margin-top: 20px;
    .total {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      color: #000;
      font-size: 14px;
      span {
        color: #ef5140;
      }
    }
  }
}
.editable-row-operations {
  a {
    color: #108de9;
  }
}
// .py_list_drawer tr:hover > td {
//   cursor: !important;
// }
// .py-table .spanBtn {
//   width: 100%;
//   display: inline-block;
//   cursor: pointer;
// }
</style>
